<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商家管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/css/bus-style.css" media="all">
    <style>
        thead tr th{text-align: center!important;font-weight: bold!important;}
        tr td{text-align: center!important;}
        .editThis,.updateThis,.updatePassword {
            border: 1px solid #fff;
        }
        .operation button{
            margin: 3px;
        }
        .shenhe span{
            font-weight: bold;
        }
        .dsfsd{
            overflow: hidden;
            transition: height 1s;
            width: 100%; height: 120px;
        }
        .skdjg{
            transition: height 1s;
            height: 100%;
        }
        .dianlas{
            margin-top: 10px;
            width: 100%; height: 20px;
        }
        .dianlas:hover{
            cursor: pointer;
        }
        .down-icon{
            background:#FFFAF0;
            border-radius: 5px;
        }
        .down-icon i{
            font-size: 18px;
            font-weight: bold;
        }
        .check-all{
            cursor: pointer;
        }
        .main_title{
            background-color: #FFFAF0;
        }
        .warehouse{
            color: #fff;
            background-color: #47afd5;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form action="/product/product" id="seachFrom" class="layui-form">
                    <div class="layui-card-body">
                        <%-- 查询条件设置 --%>
                        <div class="layui-container" style="padding-bottom: 50px;">
                            <div class="layui-col-md12">
                                <div class="layui-col-md3">
                                    <div class="layui-col-md4 layui-col-sm3" style="line-height: 38px">商品名称：</div>
                                    <div class="layui-col-sm7">
                                        <input type="text" name="proName" class="layui-input" placeholder="商品名称,模糊搜索" value="${procMain.proName}">
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="layui-col-md4 layui-col-sm3" style="line-height: 38px">商品编号：</div>
                                    <div class="layui-col-sm7">
                                        <input type="text" name="proCode" class="layui-input" placeholder="商品编号" value="${procMain.proCode}">
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="layui-col-md4 layui-col-sm3" style="line-height: 38px">商品状态：</div>
                                    <div class="layui-col-sm7">
                                        <select name="status" data-select="1">
                                            <option value="">全部</option>
                                            <option value="1" ${procMain.status==1?'selected':''}>已上架</option>
                                            <option value="2" ${procMain.status==2?'selected':''}>未上架</option>
                                            <%--<option value="2">仓库中</option>--%>
                                            <%--<option value="3">已删除</option>--%>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="layui-col-md4 layui-col-sm3" style="line-height: 38px">审核状态：</div>
                                    <div class="layui-col-sm7">
                                        <select name="examineStatus" data-select="3" class="select">
                                            <option value="">请选择</option>
                                            <option value="0" ${procMain.examineStatus==0?'selected':''}>待审核</option>
                                            <option value="1" ${procMain.examineStatus==1?'selected':''}>已审核</option>
                                            <%--<option value="3">已驳回</option>--%>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs12">&nbsp;</div>
                            <div class="layui-col-md12">
                                <div class="layui-col-md3">
                                    <div class="layui-col-md4 layui-col-sm3" style="line-height: 38px">商品类型：</div>
                                    <div class="layui-col-sm7">
                                        <select name="proType" class="select">
                                            <option value="">请选择</option>
                                            <c:forEach items="${procTypeList}" var="t">
                                                <option value="${t.id}" ${procMain.proType==t.id?'selected':''}>${t.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="layui-col-md4 layui-col-sm3" style="line-height: 38px">一级分类：</div>
                                    <div class="layui-col-sm7">
                                        <select name="mainClassifyFirstId" data-select="2" data-flag="2">
                                            <option value="">请选择</option>
                                            <c:forEach items="${firstList}" var="f">
                                                <option value="${f.id}" ${procMain.mainClassifyFirstId==f.id?'selected':''}>${f.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="layui-col-md4 layui-col-sm3" style="line-height: 38px">二级分类：</div>
                                    <div class="layui-col-sm7">
                                        <select name="mainClassifySecondId" data-select="2" data-flag="3" class="secondClassify">
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="layui-col-md4 layui-col-sm3" style="line-height: 38px">三级分类：</div>
                                    <div class="layui-col-sm7">
                                        <select name="mainClassifyThirdId" data-select="2-1" class="classfiy">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md12" style="margin-top: 10px">
                                <div class="layui-col-md4 layui-col-md-offset8">
                                    <div class="layui-col-sm3">
                                        <button class="layui-btn layui-btn" type="submit">产品查询</button>
                                    </div>
                                    <div class="layui-col-sm3">
                                        <div class="layui-btn-group">
                                            <ul class="layui-nav layui-bg-blue btnz drop_btn">
                                                <li class="layui-nav-item drop_li" style="height:38px;width: 92px;">
                                                    <a href="javascript:;" class="drop_a" style="font-size: 15px!important;
                                                    padding-top: 5px!important;padding-left: 25px!important;">操作
                                                        <span class="layui-nav-more drop_span"></span></a>
                                                    <dl class="layui-nav-child" style="top: 38px;line-height: 32px;left:-2px">
                                                        <c:if test="${needApply}">
                                                            <dd><button data-group="1" type="button" class="layui-btn
                                                        layui-btn-primary layui-btn-sm layui-btn-fluid red updateBatch">上架产品</button></dd>
                                                        </c:if>
                                                        <dd><button data-group="2" type="button" class="layui-btn
                                                        layui-btn-primary layui-btn-sm layui-btn-fluid red updateBatch">下架产品</button></dd>
                                                        <c:if test="${needApply}">
                                                            <dd><button data-group="3" type="button"
                                                                        class="layui-btn layui-btn-primary layui-btn-fluid updateBatch">审核通过</button></dd>
                                                        </c:if>
                                                        <dd><button data-flag="1" data-type="updatePassword" type="button"
                                                                    class="layui-btn layui-btn-primary layui-btn-fluid updatePassword">导出明细</button></dd>
                                                    </dl>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="layui-col-sm3" style="margin-left: 5px">
                                        <button class="layui-btn layui-btn-warm addThis" data-type="addThis" type="button">添加产品</button>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md12"><hr></div>
                        </div>
                        <%-- 数据展示 --%>
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th><span class="layui-badge layui-bg-blue check-all">全</span></th>
                                <th>商品描述</th>
                                <th>商品名称</th>
                                <th>商品信息</th>
                                <th>运费</th>
                                <th>审核状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${pageInfo.records}" var="l">
                                <tr>
                                    <td style="width: 2%;text-align: center">
                                        <input class="check-input" type="checkbox" lay-skin="primary" value="${l.id}"></td>
                                    <td width="10%">
                                        <c:if test="${l.status==1}">
                                            <span class="layui-badge layui-bg-green">已上架</span><br>
                                        </c:if>
                                        <c:if test="${l.status==2}">
                                            <span class="layui-badge">未上架</span><br>
                                        </c:if>
                                        <c:if test="${l.status==3}">
                                            <span class="layui-badge layui-bg-black">已删除</span><br>
                                        </c:if>
                                        <img src="${l.proUrl}" style="width: 80px;height: 80px;margin-top: 10px"><br>
                                        商品编号：<br>
                                            ${l.proCode}
                                    </td>
                                    <td width="8%" style="color:#1E90FF">${l.proName}</td>
                                    <td width="40%">
                                        <div class="dsfsd" id="fdown${l.id}" style="width: 100%">
                                            <div class="skdjg" id="sdown${l.id}">
                                                <div class="sshke" id="sshke1">
                                                    <table width="100%">
                                                        <tbody id="pricetbody${l.id}">
                                                        <tr class="main_title">
                                                            <td width="15%"><i>规格名称</i></td>
                                                            <td width="12%"><i>销售价(元)</i></td>
                                                            <td width="12%"><i>成本价(元)</i></td>
                                                            <td width="10%"><i>赠送创业分</i></td>
                                                            <td width="7%"><i>销量</i></td>
                                                            <td width="7%"><i>库存</i></td>
                                                        </tr>
                                                        <c:forEach items="${l.proSkuList}" var="s">
                                                            <tr>
                                                                <td width="15%">${s.specName}</td>
                                                                <c:if test="${l.proType!=4}">
                                                                    <td width="12%">${s.price}</td>
                                                                    <td width="12%">${s.cost}</td>
                                                                    <td width="10%">${s.point}</td>
                                                                </c:if>
                                                                <td width="7%">${s.saleQty}</td>
                                                                <td width="7%">${s.qty}</td>
                                                            </tr>
                                                        </c:forEach>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                            <%-- 下拉事件 --%>
                                        <div class="dianlas down-icon" id="down${l.id}" onclick="downTd(this.id,${fn:length(l.proSkuList)})">
                                            <i class="layui-icon layui-icon-down"></i></div>
                                    </td>
                                    <td width="2%">${l.expName}</td>
                                    <td width="3%" class="shenhe">
                                        <c:if test="${l.examineStatus==0}"><span class="orange">待审核</span></c:if>
                                        <c:if test="${l.examineStatus==1}"><span class="green">已审核</span></c:if>
                                    </td>
                                    <td width="6%">
                                        <div class="operation">
                                            <button data-id="${l.id}" data-type="editThis" type="button"
                                                    class="layui-btn layui-btn-primary layui-btn-sm editThis">编辑</button><br>
                                            <button data-code="${l.proCode}" data-type="priceSet" type="button"
                                                    class="layui-btn layui-btn-sm priceSet">价格</button><br>
<%--                                            <button data-code="${l.proCode}" data-type="activity" type="button"--%>
<%--                                                    class="layui-btn layui-btn-normal layui-btn-sm activity">红包</button><br>--%>
<%--                                            <c:if test="${bType==1}">--%>
<%--                                                <button data-code="${l.proCode}" data-type="warehouse" type="button"--%>
<%--                                                        class="layui-btn layui-btn-sm warehouse"> 仓库</button><br>--%>
<%--                                            </c:if>--%>
                                            <c:if test="${l.status==1}">
                                                <button data-id="${l.id}" data-type="updateThis" data-status="2" type="button"
                                                        class="layui-btn layui-btn-warm layui-btn-sm updateThis">下架</button><br>
                                                <button data-id="${l.id}" data-status="3" data-type="updateThis" type="button"
                                                        class="layui-btn layui-btn-danger layui-btn-sm updateThis">删除</button><br>
                                            </c:if>
                                            <c:if test="${l.status==2}">
                                                <c:if test="${needApply}">
                                                    <button data-id="${l.id}" data-type="updateThis" data-status="1" type="button"
                                                            class="layui-btn layui-btn-sm updateThis">上架</button><br>
                                                </c:if>
                                                <button data-id="${l.id}" data-status="3" data-type="updateThis" type="button"
                                                        class="layui-btn layui-btn-danger layui-btn-sm updateThis">删除</button><br>
                                            </c:if>

                                            <c:if test="${l.status==3}">
                                                <c:if test="${needApply}">
                                                    <button data-id="${l.id}" data-type="updateThis" data-status="1" type="button"
                                                            class="layui-btn layui-btn-sm updateThis">上架</button><br>
                                                </c:if>
                                                <button data-id="${l.id}" data-type="updateThis" data-status="2" type="button"
                                                        class="layui-btn layui-btn-warm layui-btn-sm updateThis">下架</button><br>
                                            </c:if>
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                        <div class="test-table-reload-btn" style="margin-top: 10px;">
                            <%@include file="../paging.jsp" %>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form'], function(){
        var $ = layui.$,layer = layui.layer,form = layui.form,element = layui.element;
        form.render('select');
        element.render();

        form.on('select',function (data) {
            //得到select原始DOM对象
            var dom = data.elem;
            //获得下拉框选中的id
            var id = $(dom).val();
            //获取选中的标记(2二级分类/3三级分类)
            var flag = $(dom).data('flag');
            //获取改变的是哪一个下拉框
            var select = $(dom).data('select');
            //只有下拉框是分类下拉框时才进入此方法
            //如不加判断则所有下拉框都会进入方法，则会报错
            if(select===2){
                $.ajax({
                    url: "/classify/queryClassifyListByAjaxPlat",
                    data: {"pid":id,"flag":flag,"type":3},
                    dataType: "json",
                    type: "post",
                    traditional: true,
                    success: function (data) {
                        var html = '<option value="">请选择</option>';
                        $.each(data, function (i, v) {
                            html += '<option value="' + v.id + '" hassubinfo="true">' + v.name + '</option>'
                        });
                        if(flag===2){
                            $('.secondClassify').append(html);
                        }else if(flag===3){
                            $('.classfiy').append(html);
                        }
                        form.render();
                    }
                });
            }
        });
        var active = {
            addThis:function () {
                window.location.href = "/product/productAdd";
            },
            editThis:function (id) {
                //查看
                window.location.href = "/product/productEdit?proId=" + id;
            },
            updateThis:function (id,status) {
                layer.confirm('确定操作吗？', function(){
                    $.ajax({
                        url: "/product/handleProductStatus",
                        data: {'id': id,'status':status},
                        dataType: "json",
                        type: "post",
                        success: function (data) {
                            if (data.status) {
                                layer.msg(data.desc, {icon: 1});
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000)
                            } else {
                                layer.msg(data.desc, {icon: 2})
                            }
                        }
                    })
                })

            },
            applyThis:function (id,examineStatus) {
                layer.confirm('确定操作吗？', function(){
                    $.ajax({
                        url: "/product/handleProductStatus",
                        data: {'id': id,'examineStatus':examineStatus},
                        dataType: "json",
                        type: "post",
                        success: function (status) {
                            if (status) {
                                layer.msg('操作成功', {icon: 1});
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000)
                            } else {
                                layer.msg('操作失败', {icon: 2})
                            }
                        }
                    })
                })
            },
            updateBatch:function (group,idArr) {
                layer.confirm('确定操作吗？', function(){
                    $.ajax({
                        url: "/product/handleProductStatusBatch",
                        data: {'type': group,'idArr':JSON.stringify(idArr)},
                        dataType: "json",
                        type: "post",
                        success: function (data) {
                            if (data.status) {
                                layer.msg(data.desc, {icon: 1});
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000)
                            } else {
                                layer.msg(data.desc, {icon: 2})
                            }
                        }
                    })
                })
            },
            activity:function(proCode){
                layer.open({
                    title:'红包活动充值',
                    type: 2,
                    area: ['550px', '500px'],
                    content: '/product/redPacket?proCode='+proCode
                });
            },
            priceSet:function(proCode){
                layer.open({
                    title:'设置商品信息',
                    type: 2,
                    area: ['750px', '500px'],
                    content: '/product/priceStock?proCode='+proCode
                });
            },
            warehouse:function(proCode){
                var index = layer.open({
                    title:'设置商品信息',
                    type: 2,
                    area: ['700px', '500px'],
                    content: '/product/warehouseEdit?proCode='+proCode
                });
                layer.full(index);
            }
        };
        //新增按钮事件触发
        $(".addThis").on('click',function () {
            var type = $(this).data('type');
            active[type] && active[type].call(this);
        });
        //查看或编辑事件触发
        $(".editThis").on('click',function () {
            var type = $(this).data('type');
            var id = $(this).data('id');
            active[type] && active[type].call(this,id);
        });
        //下架或删除事件触发
        $(".updateThis").on('click',function () {
            var type = $(this).data('type');
            var id = $(this).data('id');
            var status = $(this).data('status');
            active[type] && active[type].call(this,id,status);
        });
        //审核事件触发
        $(".applyThis").on('click',function () {
            var type = $(this).data('type');
            var id = $(this).data('id');
            var examineStatus = $(this).data('examineStatus');
            active[type] && active[type].call(this,id,examineStatus);
        });
        //全选按钮视觉效果
        $(".check-all").on('click',function () {
            var idArr = [];
            $(".check-input").each(function (i,v) {
                idArr.push(v.value);
                $(this).prop("checked",true);
            });
            form.render();
        });
        //批量事件
        $(".updateBatch").on('click',function () {
            var group = $(this).data('group');
            var type = "updateBatch";
            var idArr = "";
            $(".check-input").each(function (i,v) {
                if(v.checked){
                    idArr += parseInt(v.value) + ",";
                }
            });
            idArr = idArr.substr(0,idArr.length-1);
            active[type] && active[type].call(this,group,idArr);
        });
        //红包活动事件触发
        $(".activity").on('click',function () {
            var proCode = $(this).data('code');
            var type = $(this).data('type');
            active[type] && active[type].call(this,proCode);
        });
        //设置价格
        $(".priceSet").on("click",function () {
            var proCode = $(this).data('code');
            var type = $(this).data('type');
            active[type] && active[type].call(this,proCode);
        });
        $(".warehouse").on('click',function () {
            var type = $(this).data('type');
            var code = $(this).data('code');
            active[type] && active[type].call(this,code);
        })
    });

    /* 表格内下拉 */
    function downTd(id, num) {
        var down;
        var sdfdf;
        if (num == undefined || num == null) {
            num = 6;
        }
        down = id;
        sdfdf = $("#" + down).prev().attr("id");
        var dsfsd = document.getElementById(sdfdf);
        var height = parseInt(dsfsd.style.height || dsfsd.clientHeight
            || dsfsd.offsetHeight || dsfsd.scrollHeight);
        //每个产品高度50px
        var chise = num * 50;
        if (height < chise) {
            dsfsd.style.height = chise + 'px';
        } else {
            dsfsd.style.height = '120px';
        }
    }
</script>
</body>
</html>